<template>
  <view class="swiper-container">
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item, idx) in banners" :key="idx">
        <image :src="item.img" class="swiper-img" mode="aspectFill" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  name: 'BannerSwiper',
  data() {
    return {
      banners: [
        { img: '/static/logo.png', link: '#' },
        { img: 'https://dummyimage.com/600x200/19cf8a/fff&text=Banner2', link: '#' },
        { img: 'https://dummyimage.com/600x200/f9d423/fff&text=Banner3', link: '#' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.swiper-container {
  margin: 12px 12px 0 12px;
  border-radius: 12px;
  overflow: hidden;
  height: 120px;
  background: #eee;
}
.swiper-img {
  width: 100%;
  height: 120px;
  display: block;
}
</style> 